<template>
	<div class="banner">
		<div class="banner-upper-right">
			<img @click="remove()" src="../../../../public/img/user/retreat.png" >
		</div>
		<!-- 头部 -->
			<div class="banner-top-user">
				<div class="banner-top-left">
					<img src="../../../assets/img/User.png" >
				</div>
				<template v-if="!phone">
					<div class="banner-top-right">
						<h3 @click="getorder()">去登陆/注册</h3>
						<p>新用户注册送388元大礼包</p>
						<img src="../../../assets/img/User-jiao.png" >
					</div>
				</template>
				<template v-if="phone">
					<div class="banner-top-right">
						<div class="top-rightTop">
							<label>yxk_{{phone}}</label>
							<img src="../../../../public/img/user/update.png" />
						</div>
						<div class="top-rightBottom">
							<div class="top-rightBottom-left">
								<img src="../../../../public/img/user/lv.png" >
								<span>1 普陀山</span>
							</div>
							<div class="top-rightBottom-right">
								<img src="../../../../public/img/user/member.png" >
								<span>普通会员</span>
							</div>
						</div>
					</div>
				</template>
		</div>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	export default{
		name:'Banner',
		data(){
			return{
				phone:''
			}
		},
		methods:{
			remove(){
				if(this.phone){
					Cookies.remove('phone')
					this.$router.go(0)//刷新当前页面
				}
			},
			getorder(){
				this.$router.push({path:'/login',query:{url:'user'}})
			}
		},
		created() {
			this.phone = Cookies.get('phone')
		}
	}
</script>

<style scoped>
	.banner{
		background-color: white;
		width: 100%;
		height: 4rem;
		background-image: url(../../../assets/img/User-bg.png);
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.top-rightBottom{
		margin-top: 0.1rem;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.top-rightBottom-left{
		display: flex;
		justify-content: space-between;
		padding: 0.05rem 0.1rem;
		border-radius: 0.2rem;
		color: #cf9c00;
		background: rgba(0,0,0,0.9);
	}
	.top-rightBottom .top-rightBottom-left img,.top-rightBottom .top-rightBottom-right img{
		width: 0.35rem;
		position: relative;
		transform: rotate(0deg);
		left: 0%;
		margin-top: 0;
	}
	.top-rightBottom .top-rightBottom-right{
		display: flex;
		justify-content: space-between;
		padding: 0.05rem 0.1rem;
		border-radius: 0.2rem;
		background: rgba(255, 242, 179, 1.0);
	}
	.banner-upper-right{
		width: 100%;
		position: absolute;
		top: 0;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.banner-upper-right img{
		margin-right: 3%;
		width: 0.5rem;
	}
	.banner-top-user{
		width: 90%;
		overflow: hidden;
		display: flex;
		align-items: center;
	}
	.banner-top-left{
		width: 25%;
		height: 100%;
	}
	.banner-top-left img{
		border-radius: 50%;
		width: 1.7rem;
		height: 1.7rem;
	}
	.banner-top-right{
		width: 45%;
		overflow: hidden;
		margin-top: -0.5rem;
	}
	.banner-top-right h3{
		font-size: 0.54rem;
		font-weight: bold;
	}
	.banner-top-right .top-rightTop{
		height: 0.7rem;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.banner-top-right .top-rightTop label{
		padding: 0.3rem 0;
		width: 80%;
		font-size: 0.45rem;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;/*内容超宽后禁止换行显示*/
		overflow: hidden;/*超出部分隐藏*/
		text-overflow:ellipsis;/*文字超出部分以省略号显示*/
	}
	.banner-top-right .top-rightTop img{
		transform: rotate(0deg);
		position: relative;
		width: 0.5rem;
		margin: 0 ;
		left: 0;
	}
	.banner-top-right p{
		position: absolute;
		height: 0.6rem;
		width: auto;
		min-width: 3.79rem;
		text-align: center;
		line-height: 0.6rem;
		border-radius: 0.5rem;
		color: white;
		margin-top: 0.3rem;
		background: linear-gradient(to right, #ff6000, #ffa32c); 
		z-index: 5;
	}
	.banner-top-right  img{
		position: absolute;
		transform: rotate(160deg);
		left: 32%;
		z-index: 4;
		margin-top: 0.2rem;
	}
</style>
